<!DOCTYPE html>
<html lang='en'>

<head>
	<meta charset='utf-8' />
	<link href='https://cdn.jsdelivr.net/npm/fullcalendar@5.11.0/main.min.css' rel='stylesheet' />
	<script src='https://cdn.jsdelivr.net/npm/fullcalendar@5.11.0/main.min.js'></script>

	<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.0/locales-all.js"></script>

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
	</script>
	<script>

		var url = 'http://127.0.0.1:8080/calendar';
		var event = null;
		$.ajax({
			url: url,
			dataType: 'json',
			async: false,
			success: function (data) {
				event = data;

			}
		});

		document.addEventListener('DOMContentLoaded', function () {

			var calendarEl = document.getElementById('calendar');
			var calendar = new FullCalendar.Calendar(calendarEl, {
				initialView: 'dayGridMonth',
				locale: 'zh-cn',
				headerToolbar: {
					left: 'prev,next,today',
					center: 'title',
					right:'dayGridMonth,timeGridWeek'
				},

				events: event,


			});

			calendar.render();

		});

	</script>



</head>

<body>
	<div id='calendar'></div>
</body>

</html>